//
//  ViewController.m
//  AutoLayoutStudy
//
//  Created by Evan Xie on 7/31/15.
//  Copyright (c) 2015 Family Wings. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 首先创建2个Label, 让它们位于视图的上部
    
    // 如果我们在代码中使用AutoLayout，那么我们自己创建的UIView, 需要指定frame为CGRectZero,
    // AutoLayout会根据Constraints自行计算每个UIView的大小及位置。
    UILabel *testLabel1 = [[UILabel alloc] initWithFrame:CGRectZero];
    testLabel1.textAlignment = NSTextAlignmentCenter;
    testLabel1.backgroundColor = [UIColor redColor];
    testLabel1.text = @"Family Wings";
    testLabel1.tag = 1;
    testLabel1.font = [UIFont fontWithName:@"MarkerFelt-Thin" size:20.0];
    
    // 如果我们在代码中要用到AutoLayout功能，那么我们需要将UIView的translatesAutoresizingMaskIntoConstraints设置为NO,
    // 这样iOS就不会把 UIView的autoresizingMask也转换成Contrainst加进来。
    testLabel1.translatesAutoresizingMaskIntoConstraints = NO;
    
    // 我们需要将UIView先加入到父视图中，才能使用Contraints.
    [self.view addSubview:testLabel1];
    
    UILabel *testLabel2 = [[UILabel alloc] init];
    testLabel2.backgroundColor = [UIColor greenColor];
    testLabel2.textAlignment = NSTextAlignmentCenter;
    testLabel2.tag = 2;
    testLabel2.translatesAutoresizingMaskIntoConstraints = NO;
    testLabel2.text = @"We want to fly free!";
    [self.view addSubview:testLabel2];
    
    //现在我们再创建两个位于界面底部的Label, 并且拥有相同的width
    UILabel *testLabel3 = [[UILabel alloc] init];
    testLabel3.backgroundColor = [UIColor magentaColor];
    testLabel3.textAlignment = NSTextAlignmentCenter;
    testLabel3.translatesAutoresizingMaskIntoConstraints = NO;
    testLabel3.text = @"Left Bottom";
    [self.view addSubview:testLabel3];
    
    UILabel *testLabel4 = [[UILabel alloc] init];
    testLabel4.backgroundColor = [UIColor magentaColor];
    testLabel4.textAlignment = NSTextAlignmentCenter;
    testLabel4.translatesAutoresizingMaskIntoConstraints = NO;
    testLabel4.text = @"Right Bottom";
    [self.view addSubview:testLabel4];
    
    // 我们再创建个imageView, 让它填充界面中间空白区域
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"巴哈伊空中花园01.jpg"]];
    imageView.contentMode = UIViewContentModeScaleAspectFit;
    imageView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:imageView];
    
    // 最后，我们创建个heart imageView, 让它位于界面中心
    UIImageView *heartImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Heart.png"]];
    heartImageView.contentMode = UIViewContentModeScaleAspectFit;
    heartImageView.translatesAutoresizingMaskIntoConstraints = NO;
    heartImageView.alpha = 0.7;
    [self.view addSubview:heartImageView];

    
    // 绑定视图，给NSLayoutConstraint类使用。不用此方法绑定也可以，你可以直接用key:value，比如@{@"testLabel1": testLabel1}
    // 只不过可此方法可以绑定多个view, 比较方便.
    NSDictionary *bindingViews = NSDictionaryOfVariableBindings(testLabel1, testLabel2, testLabel3, testLabel4, imageView, heartImageView);
    
    /**
     @"H:|-[testLabel1]-|" Visual Format Language, Apple在iOS6及以后版本中提供的可视化格式语言，方面UIView之间的布局。
     
     H: 代表水平方向, x-axis
     V: 代表垂直方面, y-axis
     |  代表父视图，superView, 比如在这个例子中，testLabel1的父视图是self.view
     -  代表相领两个UIView之间的间距，此间距为iOSUIView之间的的默认间距(水平方向为16px, 垂直方向为8px)，你也可以这样指定30.0像素的间距：[testLabel1]-30.0-[testLabel2]
     [] 代表UIView, 比如[testLabel1]代表testLabel1
     () 代表width、height等数值域，如 H:[testLabel1(100.0)] 表示testLabel1的width为100.0, V:[testLabel1(40.0)] 表示testLabel1的height为40.0
     */
    
    // 这个表示testLabel1与父视图左边间距为iOS默认间距16px, 与父视图的右边间距为iOS默认间距16px, 所以testLabel1的width为(self.view.width-2*16.0)
    NSArray *hConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[testLabel1]-|" options:0 metrics:nil views:bindingViews];
    
    // 这个表示testLabel1与父视图上边间距为40px, testLabel1的height为40.0, 所以最终testLabel1的frame为CGRect(16, 40, self.view.width-2*16, 40)
    NSArray *vConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40.0-[testLabel1(40.0)]" options:0 metrics:nil views:bindingViews];
    [self.view addConstraints:hConstraints];
    [self.view addConstraints:vConstraints];
    
    // 这个表示testLabel2与父视图的左右两边的间距为0， 所以它的width为self.view.width
    hConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[testLabel2]|" options:0 metrics:nil views:bindingViews];
    
    // 这个表示testLabel2在testLabel1的下边，两者之间的间距为iOS垂直默认间距8px, testLabel2的height为40.0, 所以最终frame为CGRect(0, 88, 667, )
    vConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[testLabel1]-[testLabel2(40.0)]" options:0 metrics:nil views:bindingViews];
   
    // 将Constraints加入到父视图中。
    [self.view addConstraints:hConstraints];
    [self.view addConstraints:vConstraints];
    
    // 如果在这打印，输出的frame全是0， 因为AutoLayout并没有在viewDidLoad时计算每个view的frame, 而是在每个view的layoutSubViews方法中去计算
    // 所以我们改在viewDidLayoutSubviews中输出，就可以看到最终的frame了.
    NSLog(@"%@\n%@", testLabel1, testLabel2);
    
    
    // 然后我们来设置界面底部的2个Label, 他们水平排列，拥有相同width
    
    // 首先设置好testLabel3的位置
    hConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[testLabel3]" options:0 metrics:0 views:bindingViews];
    vConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[testLabel3(40.0)]-10.0-|" options:0 metrics:0 views:bindingViews];
    [self.view addConstraints:hConstraints];
    [self.view addConstraints:vConstraints];
    
    // 然后设置好testLabel4位置
    hConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[testLabel3]-[testLabel4]-|" options:0 metrics:0 views:bindingViews];
    vConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[testLabel4(40.0)]-10.0-|" options:0 metrics:0 views:bindingViews];
    [self.view addConstraints:hConstraints];
    [self.view addConstraints:vConstraints];
    
    // 让testLabel3与testLabel4拥有相同的width
    NSLayoutConstraint *relationConstraint = [NSLayoutConstraint constraintWithItem:testLabel3
                                                                          attribute:NSLayoutAttributeWidth
                                                                          relatedBy:NSLayoutRelationEqual
                                                                             toItem:testLabel4
                                                                          attribute:NSLayoutAttributeWidth
                                                                         multiplier:1.0
                                                                           constant:0];
    [self.view addConstraint:relationConstraint];
    
    // 让imageView填充中间空白区域
    hConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-16.0-[imageView]-16.0-|"
                                                           options:0
                                                           metrics:nil
                                                             views:bindingViews];
    vConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[testLabel2]-[imageView]-[testLabel3]"
                                                           options:0
                                                           metrics:nil
                                                             views:bindingViews];
    [self.view addConstraints:hConstraints];
    [self.view addConstraints:vConstraints];
    
    //现在，我们不用Visual Format Language来设置，改用另一个接口来让heartImageView居中
    
    // 首先设备heartImageView的width, height
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:heartImageView
                                                                       attribute:NSLayoutAttributeWidth
                                                                       relatedBy:NSLayoutRelationEqual
                                                                          toItem:nil
                                                                       attribute:NSLayoutAttributeNotAnAttribute
                                                                      multiplier:1.0
                                                                        constant:100.0];
    
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:heartImageView
                                                                        attribute:NSLayoutAttributeHeight
                                                                        relatedBy:NSLayoutRelationEqual
                                                                           toItem:nil
                                                                        attribute:NSLayoutAttributeNotAnAttribute
                                                                       multiplier:1.0
                                                                         constant:100.0];
    
    NSLayoutConstraint *xCenterConstraint = [NSLayoutConstraint constraintWithItem:heartImageView
                                                                         attribute:NSLayoutAttributeCenterX
                                                                         relatedBy:NSLayoutRelationEqual
                                                                            toItem:self.view
                                                                         attribute:NSLayoutAttributeCenterX
                                                                        multiplier:1.0
                                                                          constant:0];
    NSLayoutConstraint *yCenterConstraint = [NSLayoutConstraint constraintWithItem:heartImageView
                                                                         attribute:NSLayoutAttributeCenterY
                                                                         relatedBy:NSLayoutRelationEqual
                                                                            toItem:self.view
                                                                         attribute:NSLayoutAttributeCenterY
                                                                        multiplier:1.0
                                                                          constant:0];
    
    [self.view addConstraints:@[widthConstraint, heightConstraint, xCenterConstraint, yCenterConstraint]];
}

- (void)viewDidLayoutSubviews
{
    NSArray *views = [self.view subviews];
    for (UIView *view in views) {
        if (view.tag == 1 || view.tag == 2) {
            NSLog(@"%@", view);
        }
    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
